<template>
	<!-- 根视图容器 -->
	<view>
		<!-- 水平滚动视图组件，允许内容在水平方向上滚动 -->
		<scroll-view scroll-x="true" class="scroll-row">
			<!-- 遍历传入的商品属性数组，为每个属性创建一个视图项 -->
			<view class="scroll-row-item" v-for="(item,index) in attrs" :key="index">
				<!-- 每个属性项的具体内容视图，设置固定的宽度和高度，使用弹性布局进行垂直居中对齐和文本居中显示 -->
				<view style="width: 170rpx;height: 140rpx;" class="d-flex flex-column j-center text-center">
					<!-- 显示一个CPU图标 -->
					<view class="iconfont icon-cpu line-h-sm"></view>
					<!-- 显示属性名称 -->
					<view>{{item.name}}</view>
					<!-- 显示属性值 -->
					<view>{{item.value}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			// 组件内部的数据对象，当前为空
			return {

			}
		},
		methods: {
			// 组件的方法，当前为空
		},
		props: {
			// 接收从父组件传递过来的商品属性数组
			attrs: {
				type: Array // 限定传递的类型为数组
			}
		}
	}
</script>

<style>
	/* 这里样式为空，可根据需要添加样式 */
</style>